<template>
<transition
:css="false"
@enter="enter"
@leave="leave"
>
  <!-- <div class="normal-player" v-show="this.$store.getters.isFullScreen"> -->
    <div class="normal-player" v-show="this.isFullScreen">
    <div class="player-warpper">
    <PlayerHeaderVue></PlayerHeaderVue>
    <PlayerMiddleVue :currentTime="currentTime"></PlayerMiddleVue>
    <PlayerBottomVue :totalTime="totalTime" :currentTime="currentTime"></PlayerBottomVue>
    </div>
    <div class="bg-img">
        <img :src=currentSong.picUrl alt="">
    </div>
  </div>
</transition>
</template>

<script>
import PlayerBottomVue from './PlayerBottom.vue'
import PlayerHeaderVue from './PlayerHeader.vue'
import PlayerMiddleVue from './PlayerMiddle.vue'
// mapGetters 辅助函数仅仅是将store中的getter映射到局部计算属性:
import { mapGetters,mapActions } from 'vuex'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
export default {
  name: 'NormalPlayer',
  props:{
    totalTime:{
      type:Number,
      default:0,
      required:true
    },
    currentTime:{
      type:Number,
      default:0,
      required:true
    }
  },
  components:{
    PlayerHeaderVue,
    PlayerMiddleVue,
    PlayerBottomVue
  },
  computed:{
    ...mapGetters([
      'isFullScreen',
      'currentSong'
    ])
  },
  methods: {
    ...mapActions([
      'getSongLyric'
    ]),
    enter(el,done){
      Velocity(el,'transition.shrinkIn',{ duration:500 },function(){
        done()
      })
    },
    leave(el,done){
      Velocity(el,'transition.shrinkOut',{ duration:500 },function(){
        done()
      })
    }
  },
  watch:{
    currentSong(newValue,oldValue){
      // console.log(newValue);
      // console.log(newValue.id);
      //调用时传递id到达actions里的getSongLyric中
      if(newValue.id === undefined){
        return
      }
      this.getSongLyric(newValue.id)
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../assets/css/variable.scss';
@import '../../assets/css/mixin.scss';
.normal-player{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    @include bg_sub_color();
    .player-warpper{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 999;
    }
    // 图片在底部
    .bg-img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        img{
            height: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            // 高斯模糊
            filter: blur(10px);
        }
    }
}
</style>
